<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title></title>
    <style>
    </style>
</head>
<body>
<script>
    var body = document.body;
    var div1 = document.createElement('div');
    body.appendChild(div1);
    div1.style.width='544px';
    div1.style.height='634px';
    div1.style.backgroundColor='bisque'
    div1.style.margin = '0px auto';
    div1.style.padding = '0px';
    div1.style.border='1px solid bisque'
    var div2 = document.createElement('div');
    div1.appendChild(div2);
    div2.style.width='500px';
    div2.style.height='590px';
    div2.style.margin='20px';
    div2.style.border='2px solid #ff9933';
    var p = document.createElement('p');
    div2.appendChild(p);
    p.innerHTML='存款收益计算器';
    p.style.height='70px'
    p.style.color='white';
    p.style.backgroundColor='#ff9933';
    p.style.margin = '0px';
    p.style.textAlign='center';
    p.style.lineHeight='70px'
    p.style.fontSize='20px'
    var div3=document.createElement('div');
    div2.appendChild(div3);
    div3.style.width='481px'
    div3.style.height='481px'
    div3.style.margin='10px'
    for(var i = 0; i < 3; i++){
        var input = document.createElement('input');
        div3.appendChild(input);
        input.style.cssText='width: 455px;height: 40px;border: 1px solid #ff9933;margin-top:20px;padding-left: 20px;color: gray;font-size: 18px;'
        input.style.outline='none'
    }
    
    var button = document.createElement('button');
    button.style.cssText='width: 481px;height: 50px;background-color:#ff9933;margin-top:20px;border:none;text-align: center;color: white;font-size: 18px;'
    div3.appendChild(button);
    button.style.outline='none'
    document.getElementsByTagName('input')[0].placeholder='存款本金';
    document.getElementsByTagName('input')[1].placeholder='存款利息';
    document.getElementsByTagName('input')[2].placeholder='存款期数';
    button.innerHTML='计算';

    var p = document.createElement('p');
    p.style.color='gray';
    p.style.width='481px';
    p.style.height='100px';
    p.style.textAlign='center';
    p.style.fontSize='25px'
    
    div3.appendChild(p);
     button.onclick = function jiSuan(){
        var benjin = document.getElementsByTagName('input')[0].value*1;
        var lixi = document.getElementsByTagName('input')[1].value*1;
        var qishu = document.getElementsByTagName('input')[2].value*1;
        p.innerHTML = (benjin + benjin*lixi*qishu).toFixed(2);
    }



</script>
</body>
</html>